<template>
    <el-dialog v-model="visible" title="上传完成" :close-on-click-modal="false" @closed="$emit('close')">
        <el-upload ref="uploadRef" :file-list="data" :auto-upload="false" :http-request="handleUpload"
            @progress="handleProgress" @success="handleSuccess" @error="handleError" style="display: none;">
        </el-upload>
        <el-alert title="正在上传到" type="success" :closable="false" style="margin-bottom: 20px;"></el-alert>
        <el-table :data="data" border stripe style="margin-bottom: 20px;">
            <el-table-column label="文件名称" prop="name">
                <template #default="{ row }">
                    <div style="display: flex;">
                        <img v-if="row.status === 'success'" :src="row.preview" alt="文件预览"
                            style="width: 30px; height: 30px; margin-right: 10px;">
                        <img v-else src="/img/images.png" alt="文件图标" style="width: 30px; height: 30px; margin-right: 10px;">
                        {{ row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="大小" prop="size"></el-table-column>
            <el-table-column label="状态">
                <template #default="{ row }">
                    <el-progress v-if="row.status === 'uploading'" :percentage="row.percentage" />
                    <el-tag v-else-if="row.status === 'success'" type="success" icon="el-icon-check">上传成功</el-tag>
                    <el-tag v-else-if="row.status === 'fail'" type="danger" icon="el-icon-close">上传失败</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <el-button type="primary" @click="backToFile">返回继续上传</el-button>
            <el-button plain @click="visible = false">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import config from '@/config/upload';
import i18n from '@/locales';

const emit = defineEmits(['back-to-file', 'close']);
const visible = ref(false);
const data = ref([]);
const uploadRef = ref(null);
const menuID = ref(0);

const open = (files, pid) => {
    visible.value = true;
    data.value = files;
    menuID.value = pid;
    nextTick(() => {
        uploadRef.value.submit();
    });
};
const backToFile = () => {
    data.value = [];
    emit('back-to-file');
};
const handleUpload = (param) => {
    var apiObj = config.apiObj;
    const data = new FormData();
    data.append(param.filename, param.file);
    data.append('pid', menuID.value);
    for (const key in param.data) {
        data.append(key, param.data[key]);
    }
    apiObj.post(data, {
        onUploadProgress: e => {
            const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10);
            handleProgress({ percent: complete }, param.file);
        }
    }).then(res => {
        var response = config.parseData(res);
        if (response.code == config.successCode) {
            handleSuccess(res, param.file);
        } else {
            handleError(response.msg || i18n.global.t('error.unknown'), param.file);
        }
    }).catch(err => {
        handleError(err, param.file);
    });
};
const handleProgress = (event, file) => {
    const foundFile = data.value.find(f => f.uid === file.uid);
    if (foundFile) {
        foundFile.percentage = event.percent; // 使用由 el-upload 组件添加的 percentage 字段
        foundFile.status = 'uploading'; // 使用由 el-upload 组件添加的 status 字段
    }
};
const handleSuccess = (response, file) => {
    const foundFile = data.value.find(f => f.uid === file.uid);
    if (foundFile) {
        foundFile.status = 'success'; // 更新状态为成功
        // 假设服务器返回的响应中包含文件预览的 URL
        foundFile.preview = response.data.url;
    }
};
const handleError = (err, file) => {
    const foundFile = data.value.find(f => f.uid === file.uid);
    if (foundFile) {
        foundFile.status = 'fail'; // 更新状态为失败
        // 可以设置 percentage 为 100 或根据实际情况来决定
        foundFile.percentage = 100;
    }
};
defineExpose({ open });
</script>
<style scoped>
.footer {
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 2.5rem;
}</style>